<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" class="pname" placeholder="输入如：广东省"> <button class="query">查询城市</button>
    <p class="my-p"></p>
    <script src="./axios.js"></script>

    <script>

        document.querySelector('.query').addEventListener('click', function () {
            let pname = document.querySelector('.pname').value

            axios({
                url: 'https://hmajax.itheima.net/api/city',
                params: {
                    pname: pname
                }
            })
                .then(res => {
                    console.log(res.data)

                    document.querySelector('.my-p').innerHTML = res.data.list.join('<br>')
                })
        })

    </script>
</body>

</html>